<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta http-equiv="pragma" content="no-cache"> 
	    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
	    <meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/common.css" />
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		body {
			background-color: #F3F3F3;
		}
		header {
			font-size: 18px;
			color: gray;
			text-align: center;
			margin: 20px;
			font-family: PingFang-SC-Regular;
		}
		.mui-content {
			width: 100%;
			height: 100%;
			background-color: #F3F3F3;
		    -webkit-overflow-scrolling: touch;
		}
		.line {
			width: 92%;
			height: 1px;
			margin-left: 4%;
			margin-bottom: 5px;
			background-color: #AAAAAA;
		}
		.order-div {
			margin: 22px 14px 0px 14px;
		}
		.item-order{
			padding-top: 15px;
			background-color: #EAE9E9;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
		}
		.item-order-NO {
			margin-left: 10px;
			font-size: 13px;
			color: #444444;
			font-family: "PingFang-SC-Regular";
		}
		.item-order-total {
			margin-right: 10px;
			float: right;
			font-size: 13px;
			color: #444444;
			font-family: "PingFang-SC-Regular";
		}
		.item-order-div {
			position: relative;
			display: -webkit-box;
			background-color: #EAE9E9;
		}
		.goods-image {
			width: 90px;
			height: 90px;
			margin: 14px 0px 10px 20px;
		}
		.order-info-div {
			margin-top: 27px;
			margin-left: 14px;
		}
		.goods-ID, .merchant-ID {
			display: none;
		}
		.goods-name {
			color: #444444;
			font-size: 14px;
			font-family: "PingFang-SC-Regular";
		}
		.price-title {
			font-size: 12px;
			color: #807F7F;
			font-family: "PingFang-SC-Regular";
		}
		.price {
			font-size: 14px;
			color: #807F7F;
			font-family: "PingFang-SC-Regular";
		}
		.order-info {
			font-size: 10px;
			color: #BDBDBD;
			font-family: "PingFang-SC-Regular";
		}
		.total-div {
			position: absolute;
			right: 15px;
			top: 27px;
			text-align: right;
		}
		.symbol-span {
			color: #E46918;
			font-size: 10px;
			font-family: "PingFang-SC-Regular";
		}
		.price-span {
			color: #E46918;
			font-size: 14px;
			font-family: "PingFang-SC-Regular";
		}
		.num-span {
			color: #807F7F;
			font-size: 12px;
			font-family: "PingFang-SC-Regular";
		}
		.line-div.order {
			margin: 0px;
			height: 1px;
			background-color: #FFFFFF;
		}
		.btn-div {
			width: 100%;
			text-align: right;
			background-color: #EAE9E9;
			border-bottom-left-radius: 8px;
			border-bottom-right-radius: 8px;
		}
		.order-left-btn {
			width: 99px;
			height: 26px;
			margin-top: 9px;
			margin-bottom: 9px;
			border-color: #D2D2D2;
			padding: 0px;
			font-size: 13px;
			color: #444444;
			font-family: "PingFang-SC-Regular";
			background-color: #FFFFFF;
		}
		.order-right-btn {
			width: 99px;
			height: 26px;
			margin-top: 9px;
			margin-bottom: 9px;
			border-color: #D2D2D2;
			padding: 0px;
			font-size: 13px;
			color: #444444;
			font-family: "PingFang-SC-Regular";
			background-color: #FFFFFF;
		}
		.goods-comment-btn {
			width: 50px;
			height: 26px;
			border-color: #D2D2D2;
			padding: 0px;
			font-size: 12px;
			color: #444444;
			font-family: "PingFang-SC-Regular";
			background-color: #FFFFFF;
		}
		.special-div {
			display: none;
			margin-top: 40px;
		}
		.special-title {
			font-size: 14px;
			color: #444444;
		    text-align: center;
			font-family: "PingFang-SC-Regular";
		}
		.line-div.special {
			width: 96%;
			height: 1px;
			margin-left: 2%;
			margin-top: 20px;
			margin-bottom: 20px;
			background-color: #000;
		}
		.empty_list {
			display: none;
		    font-size: 15px;
		    line-height: 40px;
		    color: #777;
			margin-top: 20px;
			text-align: center;
		}
		.goods-ID-hide, .merchant-ID-hide {
			display: none;
		}
	</style>
	<body>
		<header></header>
		<div class="mui-content">
			<div class="line"></div>
			<div id="orderListDiv"></div>
			<div class="empty_list">暂无订单，赶快去下单吧！</div>
			<div class="special-div">
				<div class="special-title">我的专场</div>
				<div class="line-div special"></div>
				<ul id="specialul" class="mui-table-view mui-grid-view">
			        <!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
		                <div class="mui-media-object">
		                		<img class="special-image" src="../img/index/tuijian_bg.png" />
		                		<div class="special-info-div">
		                			<div class="special-text">夹心蒸蛋糕</div>
		                			<div class="special-collect-div">
		                				<img class="collect-icon" src="../img/index/chihuo_icon.png" />
		                				<span class="collect-span">333人</span>
		                			</div>
		                		</div>
		                		<div class="special-info-div">
		                			<div class="special-price">25.80¥</div>
		                			<div class="add-shopping-car-div"></div>
		                		</div>
		                	</div>
			        </li>-->
			    </ul>
			</div>
		</div>
		<div class="common-back-div">
			<img class="common-back-img" src="../img/common/public_back.png" />
		</div>
	</body>
	<!--<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
	<script type="text/javascript" src="../js/thirdparty/wxjssdk.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script type="text/javascript" charset="utf-8">
		var userID = base.getParameter("userID");
		var orderType = base.getParameter("orderType");
		var saved = base.getSavedData();
		$(function() {
			if (orderType == 0) {
				$("header").text("全部订单");
			} else if (orderType == 1) {
				$("header").text("待支付");
			} else if (orderType == 2) {
				$("header").text("待收货");
			} else {
				$("header").text("待评价");
			}
			getOrderListData();
		})
		function getOrderListData() {
			var url = base.url.getOrderList;
			var data = {
				userID: userID,
				orderType: orderType,//0：全部，1：待支付，2：待收货，3：待评价
			};
			base.postData(url,data,getOrderListDataSuccess);
		}
		function getOrderListDataSuccess(data) {
			if(data.success === true && data.context) {
				var list = data.context.orderList||[];
				if(!list || !list.length) {
					$(".special-div").show();
					getMySpecialListData(); //当没有订单时显示我的专场数据
					$('.empty_list').show();
				} else {
					showList(list);
					saved.list = list;
				}
			} else {
				$(".special-div").show();
				getMySpecialListData(); //当没有订单时显示我的专场数据
				$('.empty_list').show();
			}
		}
		function showList(list) {
			var html = '';
			for (var index in list) {
				html += getListItem(list[index], index);
			}
			$("#orderListDiv").html(html);
		}
		function getListItem(item,index) {
			var leftBtnTitle = "删除订单";
			var rightBtnTitle = "";
			if (item.state == 1) {
	            leftBtnTitle = "取消订单";
	            rightBtnTitle = "支付";
	        } else if (item.state == 2) {
	        		rightBtnTitle = "确认收货";
	        }
			var html = '';
			html += '<div class="order-div" data-index="'+index+'">'
			html += '	<div class="item-order">'
			html += '		<span class="item-order-NO">订单号:'+ item.orderNo +'</span>'
			html += '		<span class="item-order-total">总价:'+item.totalPrice+'</span>'
			html += '	</div>'
			for (var j in item.orderDetail) {
				html += '	<div class="item-order-div" data-index="'+j+'">'
				html += '		<img class="goods-image" src='+item.orderDetail[j].goodsImg+' />'
				html += '		<div class="order-info-div">'
				html += '			<div class="goods-ID">'+item.orderDetail[j].goodsID+'</div>'
				html += '			<div class="merchant-ID">'+item.orderDetail[j].merchantID+'</div>'
				html += '			<div class="goods-name">'+item.orderDetail[j].goodsName+'</div>'
				html += '			<div><span class="price-title">单价:¥</span><span class="price">'+(item.orderDetail[j].price/100)+'</span></div>'
				html += '			<div class="order-info">'+item.orderDetail[j].standard+'</div>'
				html += '		</div>'
				html += '		<div class="total-div">'
				html += '			<div><span class="symbol-span">¥</span><span class="price-span">'+item.orderDetail[j].totalPrice+'</span></div>'
				html += '			<div class="num-span">x'+item.orderDetail[j].number+'</div>'
				if (item.state == 3) {
					html += '		<button class="goods-comment-btn">评价</button>'
				}
				html += '		</div>'
				html += '	</div>'
			}
			html += '	<div class="line-div order"></div>'
			html += '	<div class="btn-div">'
			html += '		<div class="btn-div">'
			html += '			<button style="margin-right: 5px;" class="order-left-btn">'+leftBtnTitle+'</button>'
			if (item.state != 3 && item.state != 4) {
				html += '			<button style="margin-right: 16px;" class="order-right-btn">'+rightBtnTitle+'</button>'
			}
			html += '		</div>'
			html += '	</div>'
			html +='</div>'
			return html;
		}
		function getMySpecialListData() {
			var url = base.url.getMySpecialList;
			var data = {
				userID: userID
			};
			base.postData(url,data,getMySpecialListDataSuccess);
		}
		function getMySpecialListDataSuccess(data) {
			if(data.success === true && data.context) {
				var tempMySpecialList = data.context.mySpecialList||[];
				showMySpecialList(tempMySpecialList);
			} else {
				mui.toast(data.msg);
			}
		}
		function showMySpecialList(list) {
			var html = '';
			for (var i in list) {
				html += getMySpecialListItem(list[i], i);
			}
			$("#specialul").html(html);
		}
		function getMySpecialListItem(item, index) {
			var html = '';
			html += '<li class="mui-table-view-cell mui-media mui-col-xs-6" data-index="' + index + '">'
			html += '	<div class="mui-media-object">'
			html += '		<img class="special-image" src="'+item.goodsImg+'" />'
			html += '		<div class="special-info-div">'
			html += '			<div class="special-text">'+(item.goodsName.length>7?(item.goodsName.substring(0, 6)+'...'):item.goodsName)+'</div>'
			html += '			<div class="goods-ID-hide">'+item.goodsID+'</div>'
			html += '			<div class="merchant-ID-hide">'+item.merchantID+'</div>'
			html += '			<div class="special-collect-div">'
			html += '				<img class="collect-icon" src="../img/common/hot_icon.png" />'
			html += '				<span class="collect-span">'+item.popularity+'人</span>'
			html += '			</div>'
			html += '		</div>'
			html += '		<div class="special-info-div">'
			html += '			<div class="special-price">'+(item.price/100)+'¥</div>'
			html += '			<div class="add-shopping-car-div"></div>'
			html += '		</div>'
			html += '	</div>'
			html += '</li>'
			return html;
		}
		$("#specialul").on("tap", ".mui-media-object", function() {//跳转到商品详情
			var _merchantID = $(this).find(".merchant-ID-hide").text();
			window.location.href = "goodsDetail.html?userID="+userID+'&goodsID='+$(this).find(".goods-ID-hide").text()+'&merchantID='+_merchantID;
		})
		$("#orderListDiv").on("tap", ".item-order-div", function() {
			var _merchantID = $(this).find(".merchant-ID").text();
			window.location.href = "goodsDetail.html?userID="+userID+'&goodsID='+$(this).find(".goods-ID").text()+'&merchantID='+_merchantID;
		})
		$("#orderListDiv").on("tap", ".order-right-btn", function() {
			var index = $(this).closest(".order-div").data('index');
			var _orderNo = saved.list[index].orderNo;
			var _isChooseStore = saved.list[index].isChooseStore;
			if (saved.list[index].state == 2) {
				confirmOder(_orderNo); //确认收货
			} else {
				if (_isChooseStore == 1) {
					mui.toast("进入门店");
//					window.location.href = "stores.html?userID="+userID+"&orderNo="+_orderNo;
				} else {
					base.weChatPay(_orderNo, userID, function(rse) {
						//判断是否是在wx小程序环境  
						if(window.__wxjs_environment === 'miniprogram'){
							//点击微信支付后，调取统一下单接口生成微信小程序支付需要的支付参数  
							var params = '?timestamp='+rse.timeStamp+'&nonceStr='+rse.nonceStr  
							             +'&package='+rse.package+'&paySign='+rse.sign+'&orderNo='+_orderNo;  
							//定义path 与小程序的支付页面的路径相对应  
							var path = '/pages/wxpay/wxpay'+params;  
							//通过JSSDK的api使小程序跳转到指定的小程序页面  
							wx.miniProgram.navigateTo({url: path});   
						}
					});
				}
			}
		})
		$("#orderListDiv").on("tap", ".goods-comment-btn", function() {
			var index = $(this).closest(".order-div").data('index');
			var _orderNo = saved.list[index].orderNo;
			var _goodsID = $(this).closest(".item-order-div").find(".goods-ID").text();
			var _merchantID = $(this).closest(".item-order-div").find(".merchant-ID").text();
			window.location.href = "evaluation.html?userID="+userID+'&goodsID='+_goodsID+"&orderNo="+_orderNo+"&merchantID="+_merchantID;
			return false;
		})
		$("#orderListDiv").on("tap", ".order-left-btn", function() {
			var index = $(this).closest(".order-div").data('index');
			var _orderID = saved.list[index].orderID;
			if (saved.list[index].state == 1) {//取消订单 
				cancelOrder(_orderID, $(this));
			} else {//删除订单
				deleteOrder(_orderID, $(this));
			}
		})
		function confirmOder(_orderNo) {
			var url = base.url.confirmOder;
			var data = {
				userID: userID,
				orderNo: _orderNo
			};
			base.postData(url,data,confirmOderDataSuccess);
		}
		function confirmOderDataSuccess(data) {
			mui.toast(data.msg);
			if (data.success) {
				window.location.replace("order.html?userID="+userID+"&orderType=3");
			}
		}
		function deleteOrder(_orderID, _this) {
			var url = base.url.deleteOrder;
			var data = {
				userID: userID,
				orderID: _orderID
			};
			base.postData(url,data,deleteAndcancelOrderDataSuccess.bind(null, _this));
		}
		function cancelOrder(_orderID, _this) {
			var url = base.url.cancelOrder;
			var data = {
				userID: userID,
				orderID: _orderID
			};
			base.postData(url,data,deleteAndcancelOrderDataSuccess.bind(null, _this));
		}
		function deleteAndcancelOrderDataSuccess(_this, data) {
			mui.toast(data.msg);
			if (data.success) {
				_this.closest(".order-div").remove();
			}
		}
		$(".common-back-div").on('tap','.common-back-img',function(){
			var _isFromHomePage = base.getParameter("isFromHomePage");
			if (_isFromHomePage == 1) {
				mui.back();
			} else {
				window.location.href = "index.html?userID="+userID;
			}
		});
	</script>
</html>
